<template>
	<div class="form-item col-1">
	  <div class="wrapper">
		<a-button type="primary" style="width: 310px" @click="visible = true">
		  点击添加
		</a-button>
		<draggable
			tag="div" class="tab-box"
			:list="tab_list"
			v-bind="dragOptions">
  
		  <div class="tab-item" :class="[tab_active == item.id?'active':'']" v-for="item in tab_list" :key="item.id"
			   @click="chooseIt(item)">
			<span>{{item.component}}</span><span class="close">
			<a-icon class="icon-close11" type="close-circle" @click.stop="deleteIt(item.id)"/></span>
		  </div>
  
		</draggable>
  
		<div style="margin-top: 10px" v-if="current_tab.id">
		  <div class="title-box">
			<span style="flex: 0 0 100px">订单模块</span><span style="flex: 1;">{{current_tab.component}}</span>
		  </div>
		  <div class="title-box">
			<span style="flex: 0 0 100px;align-self: center">订单名称</span>
			<span style="flex: 1;"><a-input placeholder="订单名称" style="width: 200px" v-model.trim="current_tab.name"/></span>
		  </div>
		  <div style="margin-top: 15px">
			<!-- 数据配置界面 -->
			<template-config-detail
				:layout="current_tab.layout"
				:configs="current_tab.datas"
				:rootConfig="current_tab.datas"
				type="datas"
				key="datas">
			</template-config-detail>
		  </div>
		</div>
	  </div>
  
	  <a-modal v-model="visible" title="选择添加订单类型" @ok="handleOk">
		<a-radio-group v-model="choose_type">
		  <a-radio :style="radioStyle" :value="item.uikey"  v-for="(item,index) in orderData" :key="index">
			{{item.component}}
		  </a-radio>
		</a-radio-group>
	  </a-modal>
	</div>
  </template>
  
  
  
  
  <script>
	  import draggable from 'vuedraggable';
	  // 配置项编译器
	  // import templateConfigDetail from '../template-config-detail.vue';
  
	  export default {
		  components: {
			  draggable,
			  // templateConfigDetail
		  },
  
		  props: ['value', 'config', 'rootConfig'],
  
		  data() {
			  return {
				  current_ids: [], //现在已经添加过的id
				  visible: false,
				  tab_active: '', //当前选择的选项卡
				  // tab_list: [],  //选项卡列表
				  choose_type: '',
				  current_tab: {},
				  orderData:{},
				  radioStyle: {
					  display: 'block',
					  height: '30px',
					  lineHeight: '30px',
				  },
				  dragOptions: {
					  animation: 200, // 动画时间
					  group: "description",
					  disabled: false,
					  ghostClass: "sortable-ghost",
					  dragClass: "sortable-drag",
					  filter: ".ignore-elements"
				  },
			  }
		  },
   
		  computed: {
			  tab_list: {
				  get() {
					  if(this.value.length > 0) {
						  this.value.map((item)=>{
							  item.remote_data = this.handle_data(item.datas)
							  if(item.active) {
								  this.current_tab = item;
								  this.tab_active = item.id;
							  }
						  });
					  }else {
						  this.current_tab = {};
						  this.tab_active = '';
					  }
					  return this.value;
				  },
				  set(newValue) {
					  this.$emit('input', newValue);
				  }
			  },
			  member_data () {
				  if(this.$store.state.design.member_data.is_open) {
					  return this.$store.state.design.member_data.is_open;
		  }else {
					  return {}
		  }
			  }
		  },
		  created(){
			  this.orderData = this.$store.state.design.component_list.order_data
		  },
	  mounted() {
		  for (let i = 0; i < this.tab_list.length; i++) {
			  if(this.tab_list[i].active) {
				  this.current_tab = this.tab_list[i];
				  this.tab_active = this.tab_list[i].id;
			  }
		  }
	  },
		  methods: {
			  /**
			   * 处理数据 
			   * @param {String} datas
			   * **/
			  handle_data(datas) {
				  let handleDatas = {};
				  Object.keys(datas).map(key => {
					  handleDatas[key] = datas[key].value;
				  });
				  return handleDatas;
			  },
			  chooseIt(item) {
				  for (let i = 0; i < this.tab_list.length; i++) {
					  if(this.tab_list[i].id == item.id) {
						  this.tab_list[i].active = true;
			}else {
						  this.tab_list[i].active = false;
			}
				  }
				  this.current_tab = item;
				  this.tab_active = item.id;
			  },
			  deleteIt(id) {
				  for (let i = 0; i < this.tab_list.length; i++) {
					  if (this.tab_list[i].id == id) {
						  this.tab_list.splice(i, 1);
					  }
					  if (this.current_tab.id == id) {
						  this.current_tab = {};
						  if (this.tab_list.length >= 1) {
							  this.tab_list[0].active = true;
							  this.current_tab = this.tab_list[0];
							  this.tab_active = this.tab_list[0].id;
						  }
					  }
				  }
			  },
			  handleOk(e) {
				  let choose_tab = this.orderData[this.choose_type]
				  this.tab_list.map((item)=>{
					  this.current_ids.push(item.id);
				  });
				  let id = this.tab_list.length + 1;
				  while (this.current_ids.includes(id)) {
					  id += 1;
				  }
				  this.current_ids.push(id);
				  let component = '';
				  let datas = {};
				  let layout = [];
				  let uikey = '';
  
				  uikey = choose_tab.uikey
				  component = choose_tab.component
				  layout = [
							  {
								  title: '商品订单设置',
								  groups: [
									  'list',
								  ]
							  },
						  ];
				  datas = {
			   list:{
								  title: '',
								  type: "list",
								  notShow: true,
				  notLink: true,
								  notMore: true,
								  choose_title: {
									  choose_style: '2',
									  choose_option: [
										  {label: "普通样式", value: "1"},
										  {label: "图标+文字", value: "2"},
									  ]
								  },
								   value:choose_tab.value													
						   },
						   choose_style: {
								   title: '选择方式',
								   type: 'radio',
								   value: '2',
								   options: []
							   },						 
				  }		
				  console.log(datas);
				  let flag = false; // 判断是否有重复  
				  let item = {id: id, type_id: this.choose_type, uikey: uikey, component: component, datas: datas, layout: layout, name: '', active: true};
				  for(let i = 0; i < this.tab_list.length; i++) {
					  if(this.tab_list[i].uikey === uikey) {
						  flag = true;
					  }
				  }
  
				  if(!flag) {
					  for (let i = 0; i < this.tab_list.length; i++) {
						  this.tab_list[i].active = false;
					  }
					  this.current_tab = item;
					  this.tab_active = item.id;
					  this.tab_list.push(item);
		  }else {
					  this.$message.error('已经有重复的订单！');
		  }
  
				  this.visible = false;
			  },
		  }
	  }
  </script>
  <style lang="less" scoped>
	.tab-box {
	  margin-top: 10px;
	  display: flex;
	  flex-wrap: wrap;
	}
  
	.tab-item {
	  cursor: move;
	  border: 1px solid #333333;
	  color: #333333;
	  padding: 5px 10px;
	  margin: 5px;
	  .close {
		cursor: pointer;
		padding: 2px 5px;
		margin-left: 5px;
	  }
	  &.active {
		border: 0;
		background-color: rgba(41, 186, 156, 0.15);
		color: #29ba9c;
	  }
	}
  
	.title-box {
	  display: flex;
	  margin-bottom: 10px;
	}
  </style>
  